<template>
    <div class="container">
        <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.titleObj[state.dialog.type]"
            label-position="top" width="800px">
            <el-form ref="dialogFormRef" :model="state.ruleForm" :rules="state.ruleRules" label-width="auto">
                <div class="orderType" v-if="state.dialog.typeObj === 'order'">
                    <el-form-item label="运费:" prop="shipping_fee">
                        <el-input v-model="state.ruleForm.shipping_fee" placeholder="请输入" clearable
                            :disabled="isDisabledFn" />
                    </el-form-item>
                    <el-form-item label="总价:" prop="pay_price">
                        <el-input v-model="state.ruleForm.pay_price" placeholder="请输入" clearable
                            :disabled="isDisabledFn" />
                    </el-form-item>
                    <el-form-item label="支付渠道:" prop="pay_type">
                        <el-select v-model="state.ruleForm.pay_type" style="width: 100%" placeholder="请选择" clearable
                            filterable :disabled="state.ruleForm.pay_status === state.payStatusArr[1].value">
                            <el-option v-for="item in state.payTypeArr" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="支付状态:" prop="pay_status">
                        <el-select v-model="state.ruleForm.pay_status" style="width: 100%" placeholder="请选择" clearable
                            filterable>
                            <el-option v-for="item in state.payStatusArr" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单状态:" prop="order_status">
                        <el-radio-group v-model="state.ruleForm.order_status">
                            <el-radio v-for="(item, index) in state.orderStatusArr" :key="index" :label="item.value">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>

                </div>
                <div class="itemTpe" v-if="state.dialog.typeObj === 'item'">
                    <el-form-item label="单价:" prop="price">
                        <el-input v-model="state.ruleForm.price" placeholder="请输入" clearable :disabled="isDisabledFn" />
                    </el-form-item>
                </div>
            </el-form>
            <template v-if="!isDisabledFn" #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" size="default" @click="onSubmit">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="addOrderGood">
import { reactive, onMounted, computed } from 'vue';
import { orderEdit } from '/@/api/startfab/index';
import { payStatusArr, payTypeArr, orderStatusArr } from '/@/commmon/variate';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['updateList', 'updateItem']);
const state = reactive({
    payStatusArr: payStatusArr,
    payTypeArr: payTypeArr,
    orderStatusArr: orderStatusArr,
    ruleForm: {
        pay_price: '',
        shipping_fee: '',
        pay_status: '',
        pay_type: '',
        order_status: '',
        price: '',
    },
    ruleRules: {},
    dialog: {
        isShowDialog: false,
        row: null,
        type: '',
        typeObj: {},
        titleObj: {
            'view': '查看',
            'edit': '编辑',
            'add': '新增'
        },
        isDisabled: false
    },
    loading: false,
    originalFiles: {},
})

const onSubmit = async () => {
    const isPaidValue = state.payStatusArr[1].value;
    if (
        state.dialog.row.pay_status === isPaidValue &&
        state.ruleForm.pay_type !== state.dialog.row.pay_type
    ) {
        ElMessage.error('已支付订单不能修改支付渠道');
        state.ruleForm.pay_type = state.payTypeArr[0].value;
        return;
    }

    const params = {
        ...state.ruleForm,
        id: state.dialog.row.id
    };

    const paramsOne = {
        order_id: state.dialog.row.id,
        price: state.ruleForm.price,
        type: 4
    };

    if (state.dialog.type === 'add') {
        console.log('新增');
    } else {
        if (state.dialog.typeObj === 'order') {
            orderEdit(params).then((res) => {
                if (res.code === 10000) {
                    const updateData = {
                        ...state.dialog.row,
                        ...state.ruleForm,
                        total_price: state.ruleForm.pay_price,
                    };

                    emit('updateItem', updateData, 'order');
                    onCancel();
                    ElMessage.success(res.msg);
                }
            });
        } else if (state.dialog.typeObj === 'item') {
            orderEdit(paramsOne).then((res) => {
                if (res.code === 10000) {
                    const updateData = {
                        ...state.dialog.row,
                        ...state.ruleForm,
                    };
                    emit('updateItem', updateData, 'item');
                    onCancel();
                    ElMessage.success(res.msg);
                }
            });
        }
    }
};

const openDialog = (type, row, TypeObj) => {
    const typeArr = ['edit', 'view'];
    state.dialog.row = row;
    state.dialog.type = type;
    state.dialog.typeObj = TypeObj;
    closeDialog();
    if (row && typeArr.includes(type)) {
        state.ruleForm = {
            ...state.ruleForm,
            order_id: row.orderid,
            id: row.id,
            pay_price: row.total_price,
            shipping_fee: row.shipping_fee,
            pay_status: row.pay_status,
            pay_type: row.pay_type,
            order_status: row.order_status,
            price: row.price,
        }
    }
    state.dialog.isShowDialog = true;
};

const closeDialog = () => {
    state.ruleForm = {
        order_id: '',
        pay_price: '',
        shipping_fee: '',
        pay_status: '',
        pay_type: '',
        order_status: '',
        price: '',
    }
};

const onCancel = () => {
    closeDialog();
    state.dialog.isShowDialog = false;
};

onMounted(() => { })
const isDisabledFn = computed(() => {
    return state.dialog.type === 'view'
})
defineExpose({
    openDialog,
})
</script>
<style scoped lang="scss">
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}

:deep(.el-form-item__content) {
    display: block;
}
</style>
